<template>
  <type-wrapper :name="name">
    <el-radio-group :value="selectedValue" @input="onChange">
      <el-radio v-for="(item, index) in config" :key="index" :label="item.label">{{item.value}}</el-radio>
    </el-radio-group>
  </type-wrapper>
</template>

<script>
import TypeWrapper from './type-wrapper.vue'
import { Radio, RadioGroup } from 'element-ui'
export default {
  components: {
    'type-wrapper': TypeWrapper,
    'el-radio': Radio,
    'el-radio-group': RadioGroup,
  },
  computed: {
    selectedValue() {
      if ('selectedValue' in this.extra) return this.extra.selectedValue

      const item = this.config.find(item => item.selected) || this.config[0]
      return item.label
    }
  },
  props: {
    name: {
      type: String,
    },
    config: {
      type: Array,
    },
    extra: {
      type: Object,
    }
  },
  methods: {
    onChange(value) {
      this.$emit('change', value, this.config.map(item => ({
        ...item,
        selected: item.label === value
      })))
    }
  },
  // mounted() {
  //   this.$emit('init', this.selectedValue, this.config.map(item => ({
  //     ...item,
  //     selected: item.label === this.selectedValue
  //   })))
  // }
}
</script>